<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
  <div class="default-header">
    <div class="row">
      <h1 class="col">TraceNG device configuration</h1>
    </div>
  </div>
  <div class="default-content" *ngIf="tracengTemplate">
    <mat-card class="matCard">
      <form [formGroup]="inputForm">
        <mat-form-field class="form-field">
          <input
            matInput
            type="text"
            [(ngModel)]="tracengTemplate.name"
            formControlName="templateName"
            placeholder="Template name"
          />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input
            matInput
            type="text"
            [(ngModel)]="tracengTemplate.default_name_format"
            formControlName="defaultName"
            placeholder="Default name format"
          />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input
            matInput
            type="text"
            [(ngModel)]="tracengTemplate.symbol"
            formControlName="symbol"
            placeholder="Symbol"
          />
        </mat-form-field>
        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
      </form>
    </mat-card>
    <div class="buttons-bar">
      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
    </div>
  </div>
</div>
<app-symbols-menu
  *ngIf="isSymbolSelectionOpened && tracengTemplate"
  [server]="server"
  [symbol]="tracengTemplate.symbol"
  (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>
